<script setup>
import { defaultType } from "~/api/goods";
import RecommendingList from "~/components/RecommendingList.vue";
import {
  copywritingPage,
  recommendPage,
  sellerRecommendBanner,
  searchRecord,
  companyTheoryPage,
} from "~/api/user";
import { getHotService } from "~/api/goods";
import { onMounted, ref } from "vue";
import { navigateTo } from "nuxt/app";
import { useImageCache } from "~/composables/useImageCache";

useSeoMeta({
  title: "首页   - 技能猴子",
  ogTitle: "首页 - 技能猴子",
  description: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
  ogDescription: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
});

// 使用图片缓存功能
const { getCoverImage, preloadImages } = useImageCache();

onMounted(() => {
  getGoodsType();
  getBusinessList();
  getRecommendList();
  getHotServiceList();
});

// 商品分类
const defaultTypeList = ref([]);
const getGoodsType = async () => {
  try {
    console.log('开始获取商品分类数据...');
    const data = await defaultType({});
    console.log("看一下推荐的商品分类", data);
    console.log('分类数据详情：', {
      dataData: data.data,
      dataLength: data.data?.length || 0,
      firstItem: data.data?.[0] || null
    });
    defaultTypeList.value = data.data;
  } catch (e) {
    console.error('获取商品分类失败：', e);
  }
};
// 商业文案列表
const businessList = ref([]);
const getBusinessList = async () => {
  try {
    const data = await copywritingPage({
      pageNum: 1,
      pageSize: 10,
    });
    businessList.value = data.rows.slice(0, 4);
  } catch (e) {
    console.log(e);
  }
};
// 用户推荐文案
const recommendList = ref([]);
const getRecommendList = async () => {
  try {
    const data = await recommendPage({
      pageNum: 1,
      pageSize: 10,
    });
    recommendList.value = data.rows;
    if (recommendList.value.length > 0) {
      autoScroll();
    }
  } catch (e) {
    console.log(e);
  }
};
// 用户推荐滚动
const recommendListRef = ref();
const recommendScroll = (type) => {
  if (type === 1) {
    recommendListRef.value.scrollLeft -= 412;
  } else {
    recommendListRef.value.scrollLeft += 412;
  }
};
// 用户推荐自动滚动，滚到最后一个后自动滚到第一个
const autoScroll = () => {
  if (!recommendListRef.value) return;
  recommendListRef.value.scrollLeft += 412;
  if (
    recommendListRef.value.scrollLeft + recommendListRef.value.clientWidth >=
    recommendListRef.value.scrollWidth - 1
  ) {
    recommendListRef.value.scrollLeft = 0;
  }
  setTimeout(autoScroll, 3000);
};
onMounted(() => {
  // 确保在获取推荐列表数据后再启动自动滚动
});
// 获取热门服务
const hotServiceList = ref([]);
const getHotServiceList = async () => {
  const data = await getHotService({ pageNum: 1, pageSize: 5 });
  hotServiceList.value = data.data.rows;
};
// 跳转商品列表
const toGoodsList = async (item) => {
  try {
    await navigateTo(`/commodity?firstTypeId=${item.id}`);
  } catch (err) {
    console.error("Navigation error:", err);
  }
};
//
const keyword = ref("");
const searchService = async () => {
  if (!keyword.value.trim()) return;
  try {
    await navigateTo({
      path: "/commodity",
      query: { keyword: encodeURIComponent(keyword.value.trim()), source: 'homeSearch' },
    });
  } catch (err) {
    console.error("Navigation error:", err);
  }
};
// 获取卖家推荐Banner
const sellerRecommendBannerList = ref([]);
const activeBanner = ref(0);
const getSellerRecommendBannerList = async () => {
  const data = await sellerRecommendBanner({});
  sellerRecommendBannerList.value = data.data;
  // 数量大于1，开启轮播
  if (sellerRecommendBannerList.value.length > 1) {
    setInterval(() => {
      activeBanner.value =
        (activeBanner.value + 1) % sellerRecommendBannerList.value.length;
    }, 5000);
  }
};
getSellerRecommendBannerList();
// 获取搜索关键词记录
const searchRecordList = ref([]);
const searchRecordFocus = ref(false);
const searchBoxRef = ref(null);
const dropdownStyle = ref({});

const getSearchRecord = async (force = false) => {
  // 如果不是强制请求且关键词为空，则清空列表
  if (!force && !keyword.value.trim()) {
    searchRecordList.value = [];
    return;
  }
  const data = await searchRecord({ name: keyword.value });
  searchRecordList.value = data.data.slice(0, 10);
};

// 计算下拉框位置
const updateDropdownPosition = () => {
  if (searchBoxRef.value) {
    const rect = searchBoxRef.value.getBoundingClientRect();
    dropdownStyle.value = {
      position: 'fixed',
      top: `${rect.bottom + 4}px`,
      left: `${rect.left}px`,
      width: `${rect.width}px`,
    };
  }
};

// 输入框获得焦点
const searchInputFocus = () => {
  searchRecordFocus.value = true;
  getSearchRecord(true); // 强制发送请求，即使输入框为空
  updateDropdownPosition();
};

// 输入框失去焦点
const searchRecordBlur = () => {
  setTimeout(() => {
    searchRecordFocus.value = false;
  }, 200); // 增加延迟时间，确保链接点击有足够时间执行
};

// 处理搜索建议项点击
const handleSearchItemClick = (item) => {
  // 立即隐藏下拉框
  searchRecordFocus.value = false;
  // 跳转到商品页面 - 从首页搜索不应该有type参数
  navigateTo(`/commodity?keyword=${item.name}&source=homeSearch`);
};

// 监听关键词输入变化
watch(keyword, (newValue) => {
  if (searchRecordFocus.value) {
    getSearchRecord();
  }
});
// 跳转用户主页
const toUserPage = async (userId) => {
  try {
    await navigateTo(`/userHomePage?uid=${userId}`);
  } catch (err) {
    console.error("Navigation error:", err);
  }
};
// 获取企业理论
const companyTheoryInfo = ref({});
const getCompanyTheory = async () => {
  const data = await companyTheoryPage({ pageNum: 1, pageSize: 1 });
  console.log("企业理论", data);
  companyTheoryInfo.value = data.rows[0];
};
getCompanyTheory();
</script>

<template>
  <BaseHeaderMenuWhite bg-color="transparent" :borderBottom="false" />
  <div class="talent-search">
    <div class="talent-search-content">
      <div class="search-left">
        <h1 class="website-theme">
          找技能服务，<br /><span>我喜欢和技能人才直接聊</span>
        </h1>
        <div class="search-box-wrapper">
          <div class="search-box" ref="searchBoxRef">
            <input v-model="keyword" type="text" placeholder="搜索任何服务..." @focus="searchInputFocus"
              @blur="searchRecordBlur" />
            <button @click.stop="searchService">
              <img src="~/assets/search-icon.png" alt="" />搜索
            </button>
          </div>
        </div>
        <p class="hot-service">
          <span class="class-title">热门服务：</span>
          <span class="tips" v-for="item of hotServiceList" :key="item.id" @click="toGoodsList(item)">{{ item.name
            }}</span>
        </p>
      </div>
      <div class="talent-info" v-if="sellerRecommendBannerList.length"
        @click="toUserPage(sellerRecommendBannerList[activeBanner].sellerUserId)">
        <img class="user-photo" :src="getCoverImage(sellerRecommendBannerList[activeBanner].bannerPic)" alt="" />
        <div class="info">
          <div class="name-score">
            <span class="name">{{
              sellerRecommendBannerList[activeBanner].sellerName
            }}</span>
            <span class="score">
              <img src="~/assets/score-icon.png" alt="" />
              {{ sellerRecommendBannerList[activeBanner].score }}
            </span>
          </div>
          <div class="talent-class">
            <img src="~/assets/Frame.png" alt="" />
            <span>{{ sellerRecommendBannerList[activeBanner].goodsTypeName }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="career-main" v-if="defaultTypeList && defaultTypeList.length">
    <nuxt-link class="career-item" v-for="item of defaultTypeList" :key="item.id"
      :to="`/commodity?firstTypeId=${item.id}`">
      <img :src="getCoverImage(item.icon)" :alt="item.name" />
      <span>{{ item.name }}</span>
    </nuxt-link>
    <p class="btn">
      <nuxt-link to="/commodity">
        <span>更多服务</span>
        <img src="~/assets/check-more-icon.png" alt="" />
      </nuxt-link>
    </p>
  </div>
  <div class="recommending">
    <RecommendingList v-for="item of defaultTypeList" :key="item.id" :defaultType="item" />
  </div>
  <div class="promotion">
    <div class="promotion-box">
      <div class="promotion-text">
        <h3 class="h3" v-html="companyTheoryInfo.title"></h3>
        <div v-for="item of companyTheoryInfo.itemList" :key="item.id">
          <p class="h4"><img src="~/assets/correct-icon.png" alt="" />{{ item.title }}</p>
          <p class="h5">
            {{ item.introduce }}
          </p>
        </div>
      </div>
      <div class="promotion-img">
        <img src="~/assets/promotion-img.png" alt="" />
      </div>
    </div>
  </div>
  <div class="service">
    <div class="service-box">
      <RecommendingTitle title="你需要的，我们都有" tips-text="products" />
      <div class="service-list">
        <ServiceItem v-for="item of businessList" :key="item.id" :itemData="item" />
      </div>
    </div>
  </div>
  <div class="evaluate">
    <div class="title">
      <RecommendingTitle title="数百万用户的青睐" sub-title="来自用户的真实声音" tips-text="consumer" />
      <img src="~/assets/Rectangle-bg.png" alt="" />
    </div>
    <div class="evaluate-list" ref="recommendListRef">
      <EvaluateItem v-for="item of recommendList" :key="item.id" :itemData="item" />
    </div>
    <div class="page-change">
      <div class="page-up" @click="recommendScroll(1)">
        <img src="~/assets/page-left.png" alt="" />
      </div>
      <div class="page-next" @click="recommendScroll(2)">
        <img src="~/assets/page-right.png" alt="" />
      </div>
    </div>
  </div>
  <div class="find-ability">
    <h3>服务好您交给的任务</h3>
    <h4>个性化人才解决方案</h4>
    <nuxt-link to="/commodity">开始寻找人才</nuxt-link>
  </div>
  <BaseFooter />
  
  <!-- 搜索建议下拉框 - 使用 Teleport 挂载到 body -->
  <Teleport to="body">
    <div v-if="searchRecordFocus && searchRecordList.length" 
         class="you-search-dropdown" 
         :style="dropdownStyle">
      <h3>猜你想搜</h3>
      <div class="you-search-list">
        <p v-for="item of searchRecordList" :key="item.id" @click="handleSearchItemClick(item)">
          {{ item.name }}
        </p>
      </div>
    </div>
  </Teleport>
</template>

<style scoped lang="scss">
// 防止整个页面出现水平滚动
* {
  box-sizing: border-box;
}

// 确保页面不会出现水平滚动
:global(html, body) {
  overflow-x: hidden;
  max-width: 100vw;
}

// 当前组件的根元素也防止水平滚动
:global(.page-enter-active),
:global(.page-leave-active) {
  overflow-x: hidden;
}

.talent-search {
  min-height: 600px;
  width: 100%;
  max-width: 100vw;
  background: url("~/assets/header-bg-img.png") no-repeat;
  background-size: cover;
  background-position: center;
  padding: 0 20px;

  @media (max-width: 768px) {
    padding: 0 15px;
    background-attachment: scroll;
  }

  @media (max-width: 480px) {
    padding: 0 10px;
    min-height: 500px;
  }
}

.talent-search-content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding-top: 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  overflow-x: hidden;

  @media (max-width: 768px) {
    flex-direction: column;
    padding-top: 40px;
    gap: 20px;
  }

  @media (max-width: 480px) {
    padding-top: 30px;
    gap: 15px;
  }
}

.search-left {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  padding-top: 132px;
  overflow: visible;

  @media (max-width: 768px) {
    padding-top: 60px;
    min-width: 0;
  }

  @media (max-width: 480px) {
    padding-top: 40px;
  }

  .website-theme {
    font-size: 48px;
    line-height: 68px;
    font-weight: bold;
    color: #f6be56;

    @media (max-width: 768px) {
      font-size: 32px;
      line-height: 44px;
    }

    @media (max-width: 480px) {
      font-size: 28px;
      line-height: 38px;
    }

    span {
      color: #fff;
    }
  }

  .search-box-wrapper {
    max-width: 500px;
    width: 100%;
    margin-top: 24px;
    position: relative;
    min-width: 280px;

    @media (max-width: 480px) {
      max-width: 100%;
      min-width: 260px;
    }

    @media (max-width: 360px) {
      min-width: 240px;
    }

    @media (max-width: 320px) {
      min-width: 220px;
    }
  }

  .search-box {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    overflow: hidden;

    input {
      flex: 1;
      font-size: 16px;
      padding: 0 20px;
      height: 48px;
      border: none;
      user-select: none;
      border-radius: 8px;
      min-width: 0;
      width: 100%;

      @media (max-width: 480px) {
        padding: 0 12px;
        font-size: 14px;
      }

      @media (max-width: 360px) {
        padding: 0 8px;
        font-size: 13px;
      }

      &:focus {
        outline: none;
      }
    }

    button {
      width: 96px;
      height: 40px;
      background: #019a81;
      border: none;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      line-height: 20px;
      margin-right: 4px;
      cursor: pointer;
      flex-shrink: 0;
      white-space: nowrap;

      @media (max-width: 480px) {
        width: 70px;
        font-size: 12px;
        margin-right: 2px;
      }

      @media (max-width: 360px) {
        width: 60px;
        font-size: 11px;
        padding: 0 4px;
      }

      &:hover {
        background: #1dbf73;

        img {
          transform: scale(1.2);
        }
      }

      img {
        width: 20px;
        height: 20px;
        margin-right: 4px;

        @media (max-width: 480px) {
          width: 16px;
          height: 16px;
          margin-right: 2px;
        }

        @media (max-width: 360px) {
          width: 14px;
          height: 14px;
          margin-right: 1px;
        }
      }
    }
  }


  .hot-service {
    margin-top: 24px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;

    @media (max-width: 480px) {
      font-size: 14px;
    }

    .tips {
      border-radius: 4px 4px 4px 4px;
      background: rgba(255, 255, 255, 0.12);
      padding: 4px 10px;
      cursor: pointer;
      color: #ffff;
      user-select: none;
      white-space: nowrap;

      @media (max-width: 480px) {
        padding: 3px 8px;
        font-size: 12px;
      }

      &:hover {
        background: rgba(255, 255, 255, 0.42);
      }
    }

    .class-title {
      padding: 0;
      background: none;
      white-space: nowrap;
    }
  }
}

.talent-info {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  height: 520px;
  padding-top: 44px;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;

  @media (max-width: 768px) {
    height: 400px;
    order: -1;
    min-width: 0;
  }

  @media (max-width: 480px) {
    height: 300px;
  }

  .user-photo {
    height: 100%;
    position: absolute;
    bottom: 0;
    left: -100px;
    width: auto;
    max-width: none;
    object-fit: cover;

    @media (max-width: 768px) {
      left: -30px;
      max-height: 100%;
    }

    @media (max-width: 480px) {
      left: -10px;
      max-height: 100%;
    }
  }

  .info {
    position: absolute;
    left: -28px;
    bottom: 32px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 84%);
    box-shadow: 0 10px 15px 0 rgba(0, 37, 19, 0.08);
    border-radius: 33px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 30px;
    box-sizing: border-box;
    color: #fff;
    min-width: 200px;

    @media (max-width: 768px) {
      left: -14px;
      padding-left: 20px;
      min-width: 180px;
    }

    @media (max-width: 480px) {
      left: 0;
      padding-left: 15px;
      min-width: 160px;
      font-size: 14px;
    }

    .name-score {
      display: flex;
      align-items: center;
      padding-top: 8px;
      margin-bottom: 4px;

      .name {
        margin-right: 8px;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        padding-right: 8px;
        line-height: 14px;
      }

      .score {
        font-size: 12px;

        img {
          width: 12px;
          height: 12px;
        }
      }
    }

    .talent-class {
      padding-bottom: 8px;
      display: flex;
      align-items: center;

      img {
        width: 14px;
        height: 14px;
        margin-right: 4px;
      }

      span {
        font-size: 16px;
      }
    }
  }
}

.career-main {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 20px 80px;
    justify-content: flex-start;
    gap: 20px;
    overflow-x: hidden;

    @media (max-width: 768px) {
      padding: 32px 15px 60px;
      gap: 15px;
    }

    @media (max-width: 480px) {
      padding: 32px 10px 60px;
      gap: 10px;
    }

  .career-item {
    flex: 0 0 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 48px;
    cursor: pointer;
    transition: all 0.1s;
    text-decoration: none;

    @media (max-width: 768px) {
      flex: 0 0 120px;
      margin-top: 30px;
    }

    @media (max-width: 480px) {
      flex: 0 0 100px;
      margin-top: 20px;
    }

    // 放大效果
    &:hover {
      img {
        transform: scale(1.1);
      }

      span {
        color: #019a81;
        font-weight: bold;
      }
    }

    img {
      width: 48px;
      height: 48px;
      margin-bottom: 10px;

      @media (max-width: 480px) {
        width: 40px;
        height: 40px;
      }
    }

    span {
      font-size: 16px;
      color: #191e28;
      text-decoration: none;
      text-align: center;

      @media (max-width: 480px) {
        font-size: 14px;
      }
    }
  }

  .btn {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 38px;
    cursor: pointer;

    a {
      display: flex;
      width: 124px;
      height: 44px;
      background: #008571;
      border-radius: 8px;
      align-items: center;
      justify-content: center;
      color: #fff;
      line-height: 16px;
      transition: all 0.2s;
      text-decoration: none;

      &:hover {
        background: #ffffff;
        border: 1px solid #008571;
        color: #008571;
        box-sizing: border-box;

        img {
          filter: invert(100%);
        }
      }

      img {
        width: 14px;
        height: 14px;
      }
    }
  }
}

.recommending {
  background: #f9f9f9;
  padding-bottom: 40px;
  padding-top: 20px;
  margin: 0 auto;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.promotion {
  background: #f1fdf7;
  padding: 60px 0 48px;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.promotion-box {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;

  @media (max-width: 768px) {
    flex-direction: column;
    padding: 0 15px;
  }

  .promotion-text {
    flex: 1;
    padding-right: 80px;

    @media (max-width: 768px) {
      padding-right: 0;
      margin-bottom: 30px;
    }

    .h3 {
      font-size: 28px;
      color: #191e28;
      margin-bottom: 26px;

      @media (max-width: 768px) {
        font-size: 24px;
      }

      @media (max-width: 480px) {
        font-size: 20px;
      }

      span {
        color: #1dbf73;
      }
    }

    .h4 {
      font-size: 16px;
      color: #191e28;
      line-height: 16px;
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      font-weight: bold;

      img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
    }

    .h5 {
      color: rgba(25, 30, 40, 0.6);
      font-size: 13px;
      margin-bottom: 24px;
      line-height: 18px;
    }
  }

  .promotion-img {
    flex: 1;

    img {
      width: 100%;
    }
  }
}

.service {
  background: #fff;
  padding: 46px 0 60px;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;

  .service-box {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;

    @media (max-width: 768px) {
      padding: 0 15px;
    }
  }

  .service-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    @media (max-width: 992px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 768px) {
      justify-content: center;
    }
  }
}

.evaluate {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  padding-bottom: 60px;

  .title {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;

    @media (max-width: 768px) {
      padding: 0 15px;
    }

    img {
      position: absolute;
      right: 20px;
      top: 189px;
      max-width: calc(100% - 120px);
      height: 296px;

      @media (max-width: 768px) {
        display: none;
      }
    }
  }

  .evaluate-list {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    scroll-behavior: smooth;

    // 滚动条兼容处理，把滚动条颜色设置为透明的
    &::-webkit-scrollbar {
      width: 0;
      background: transparent;
      /* make scrollbar transparent */
    }
  }

  .page-change {
    max-width: 1200px;
    width: 100%;
    margin: 36px auto 0;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 1;

    @media (max-width: 768px) {
      justify-content: center;
      padding: 0 15px;
    }

    .page-up,
    .page-next {
      width: 82px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border-radius: 100px;
      border: 1px solid rgba(25, 30, 40, 0.08);
      cursor: pointer;
      transition: background 0.2s;
      user-select: none;
      outline: none;

      &:hover {
        background: #008571;

        img {
          filter: invert(100%);
        }
      }

      img {
        width: 17px;
        height: 12px;
      }
    }

    .page-next {
      margin-right: 36px;
      margin-left: 16px;
    }
  }
}

.find-ability {
  min-height: 264px;
  width: 100%;
  max-width: 100vw;
  background: url("~/assets/find-ability-bg.png") no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  outline: none;
  padding: 40px 20px;
  overflow-x: hidden;

  @media (max-width: 768px) {
    padding: 30px 15px;
    min-height: 220px;
  }

  @media (max-width: 480px) {
    padding: 20px 10px;
    min-height: 200px;
  }

  h3 {
    font-size: 36px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 12px;
    user-select: none;
    outline: none;
    text-align: center;

    @media (max-width: 768px) {
      font-size: 28px;
    }

    @media (max-width: 480px) {
      font-size: 24px;
    }
  }

  h4 {
    font-size: 24px;
    color: #f6be56;
    margin-bottom: 24px;
    text-align: center;

    @media (max-width: 768px) {
      font-size: 20px;
    }

    @media (max-width: 480px) {
      font-size: 18px;
    }
  }

  a {
    width: 160px;
    height: 48px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;

    &:hover {
      background: #fff;
      color: #008571;
    }
  }
}
</style>

<style lang="scss">
/* 搜索建议下拉框全局样式 - 因为使用了 Teleport 挂载到 body */
.you-search-dropdown {
  background: #fff;
  border-radius: 8px;
  padding: 12px 20px;
  box-sizing: border-box;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  z-index: 9999;
  max-width: 500px;

  h3 {
    font-size: 16px;
    color: #191e28;
    font-weight: bold;
    margin-bottom: 12px;
  }

  .you-search-list {
    display: flex;
    flex-wrap: wrap;

    p {
      flex: 0 0 50%;
      font-size: 14px;
      color: #191e28;
      margin-bottom: 6px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: background-color 0.2s;

      &:hover {
        background-color: #f5f5f5;
        text-decoration: underline;
      }
    }
  }
}
</style>
